<!-- This is an HTML button element with a class "slide-button" -->
<button class="slide-button">Hover Me!</button>

<!-- This is a style block with CSS styles -->
<style type="text/css">
  /* CSS styles */
  /* Example by Discopigeon at https://codepen.io/Discopigeon/pen/mdaaVpW */

  /* Center the content horizontally in the body */
  body {
    display: flex;
    justify-content: center;
  }

  /* CSS styles for the button and its hover effect */

  /* Style for the button when not hovered */
  .slide-button {
    display: inline;
    border: 2px solid #000;
    border-radius: 8px;
    letter-spacing: 2px;
    box-shadow: inset 0 0 0 0 #000;
    transition: all .35s linear; /* Smooth transition for all properties over 0.35 seconds */
    background-color: transparent;
    font-size: 80px;
    color: #000; /* Text color is black */
  }

  /* Style for the button when hovered */
  .slide-button:hover {
    color: #fff; /* Text color changes to white on hover */
    box-shadow: inset 400px 0 0 0 #000; /* Creates a sliding effect on hover */
  }
</style>

